<template>
    <el-drawer :title="drawer.type === 'edit' ? '编辑员工' : drawer.type === 'new' ? '新增员工' : '员工详情'"
        :visible.sync="drawer.show" size="30%" custom-class="add-drawer">
        <el-divider></el-divider>
        <div style="padding: 0 20px; margin-bottom: 30px;">
            <el-form v-if="employeeForm" ref="employeeRef" :model="employeeForm" :rules="employeeRules" label-width="100px"
                label-position="left">
                <p style="font-size: 23px;">关联站点</p>
                <el-form-item label="归属站点" prop="stationId" size="small" v-if="stationList.length > 0">
                    <el-select style="width: 180px" v-model="employeeForm.stationId" :clearable="true" filterable
                        placeholder="请选择归属站点" @change="stationChange">
                        <el-option v-for="item in stationList" :key="item.stationId" :label="item.stationName"
                            :value="item.stationId">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="负责枪号" prop="gunList">
                    <el-checkbox-group v-model="employeeForm.gunList" v-if="currentGunList.length > 0">
                        <el-checkbox v-for="item in currentGunList" :key="item" :label="item" :value="item">
                            {{ item + "号枪" }}
                        </el-checkbox>
                    </el-checkbox-group>
                    <span v-else>当前油站暂无枪号</span>
                </el-form-item>
                <p style="font-size: 23px;">员工信息</p>
                <el-form-item label="员工姓名：" prop="nickName">
                    <el-input v-model="employeeForm.nickName" placeholder="请输入用户姓名"></el-input>
                </el-form-item>
                <el-form-item label="员工账号：" prop="userName">
                    <el-input v-model="employeeForm.userName" placeholder="请输入用户账号"></el-input>
                </el-form-item>
                <el-form-item label="手机号码：" prop="phonenumber">
                    <el-input v-model="employeeForm.phonenumber" placeholder="请输入手机号"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <div slot="label" :class="drawer.type === 'new' ? 't' : ''">密码</div>
                    <el-input maxlength="16" v-model="employeeForm.password" placeholder="请输入密码"></el-input>
                </el-form-item>
            </el-form>
            <div style="text-align: right;margin-bottom: 20px;">
                <el-button @click="closeDrawer">取消</el-button>
                <el-button v-if="drawer.type === 'edit'" type="primary" @click="handleSubmit('edit')">提交</el-button>
                <el-button v-if="drawer.type === 'new'" type="primary" @click="handleSubmit('add')">提交</el-button>
            </div>
        </div>
    </el-drawer>
</template>
<script>
import {
    staffAdd,
    staffUpdate,
    getStaffQueryGunList
} from "@/api/station/personnel";
export default {
    props: {
        parm: {
            type: Object,
            default: null
        }
    },
    data() {
        let validatePassword = (rule, value, callback) => {
            if (this.drawer.type === 'new' && this.employeeForm.password == '') {
                callback(new Error("新增密码不能为空"));
                return;
            }
            callback();
        };
        return {
            drawer: {
                show: this.parm ? this.parm.drawerShow : false,
                type: this.parm ? this.parm.drawerType : 'read', // edit || read || new
            },
            employeeForm: this.parm ? this.parm.editData : {},
            employeeRules: {
                stationId: [
                    { required: true, message: "归属站点不能为空", trigger: "change" }
                ],
                nickName: [
                    { required: true, message: "员工姓名不能为空", trigger: "blur" }
                ],
                userName: [
                    { required: true, message: "员工账号不能为空", trigger: "blur" }
                ],
                phonenumber: [
                    { required: true, message: "手机号码不能为空", trigger: "blur" },
                    {
                        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
                        message: "请输入正确的手机号码",
                        trigger: "blur",
                    },
                ],
                password: [
                    { validator: validatePassword, trigger: "blur" },
                    { min: 6, max: 16, message: '密码长度在 6 到 16位之间', trigger: 'blur' }
                ]
            },
            stationList: [],
            currentGunList: []
        }
    },
    methods: {
        closeDrawer() {
            this.drawer.show = false
        },
        stationChange(val) {
            this.employeeForm.gunList = []
            this.getStaffQueryGunList(val)
        },
        // 获取枪号
        getStaffQueryGunList(stationId) {
            getStaffQueryGunList({ stationId: stationId }).then(res => {
                if (res && res.data) {
                    this.currentGunList = res.data.map(item => item.gunName)
                }
            })
        },
        handleSubmit(key) {
            console.log(this.employeeForm);
            this.$refs.employeeRef.validate((valid) => {
                if (valid) {
                    this.employeeForm.gunList = this.employeeForm.gunList.sort((e, q) => {
                        return e - q
                    });
                    if (key === 'add') {
                        staffAdd(this.employeeForm).then(res => {
                            if (res && res.code === 200) {
                                this.$message.success(res.msg);
                                this.$emit('success-data')
                                this.drawer.show = false
                            } else {
                                this.$message.error(res.msg);
                            }
                        })
                    } else {
                        staffUpdate(this.employeeForm).then(res => {
                            if (res && res.code === 200) {
                                this.$message.success(res.msg);
                                this.$emit('success-data')
                                this.drawer.show = false
                            } else {
                                this.$message.error(res.msg);
                            }
                        })
                    }
                }
            })
        },
        clearForm() {
            this.$refs.employeeRef.clearValidate()
        }
    },
    watch: {
        parm(newValue) {
            console.log(newValue);
            this.drawer.show = newValue.drawerShow;
            this.drawer.type = newValue.drawerType;
            this.employeeForm = newValue.editData;
            this.stationList = newValue.stationList;
            if (newValue.editData.stationId !== '') {
                this.getStaffQueryGunList(newValue.editData.stationId)
            }
        }
    },
}
</script>
<style lang="scss" scoped>
::v-deep .add-drawer {
    overflow-y: auto;
}

::v-deep .el-drawer__header {
    margin-bottom: 0 !important;
}

.t {
    &::before {
        content: "*";
        color: red;
        margin-right: 5px;
    }
}
</style>
